<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>物流监控</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/iview@2.12.0/dist/styles/iview.css"> -->

    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src=${contextPath}/static/layer/layer.js></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/iview@2.12.0/dist/iview.min.js"></script>

    <style type="text/css">
        body {
            background-color: #0c2a52;
        }
        .zc-container {
            text-align: center;
        }
        .zc-title {

        }
        .col-left {
            text-align: left;
        }
        .col-center {
            text-align: center;
        }

        .zc-zb-box {
            overflow: hidden;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: baseline;
            -ms-flex-align: baseline;
            align-items: baseline;
            padding: 20px;
        }
        .zc-zb-name {
            font-size: 15px;
            color: #dcdcdc;
            line-height: 16px;
        }
        .zc-zb-num {
            font-size: 37px;
            color: #fff;
            line-height: 48px;
            margin-left: 20px;
        }
        .zc-zb-pc {
            font-size: 25px;
            color: green;
            line-height: 35px;
            margin-left: 55px;
            text-align: left;
            margin-top: -20px;
            margin-bottom: 40px;
        }
        .zc-zb-change {
            margin-left: 10px;
        }
        .zc-map {
        }
        .right-zb-box{

        }

        @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
            .masked{
                background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                -webkit-background-size: 200% 100%;
                -webkit-animation: masked-animation 4s infinite linear;
            }
        }
        @-webkit-keyframes masked-animation {
            0%  { background-position: 0 0;}
            100% { background-position: -100% 0;}
        }

        .zb-box {
            position: relative;
            height: 140px;
            width: 260px;
            left: 50%;
            transform: translate(-50%,0%);
        }
        .zb-jj {
            width: 0px;
            height: 0px;
            border-top: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 18px solid #2769c1;
            position: absolute;
            top: 20px;
            left: 240px;
        }
        .zb-nr {
            position: absolute;
            top:20px;
            left: 0px;
            width: 240px;
            height: 60px;
            background-color: #2769c1;
            padding-left: 100px;
            text-align: left;
        }
        .zb-title {
            margin-top: 5px;
            color: #fff;
        }
        .zb-num {
            color: red;
            font-size: 26px;
        }
        .zb-image-b {
            width: 80px;
            height: 60px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #0d1365;
        }
        .zb-image {
            width: 36px;
            height: 36px;
            margin-top: 12px;
        }
    </style>
</head>
<body>
<div class="container-fluid zc-container">
    <div class="row">
        <div class="col-sm-12 zc-title">
            <h1 style="color: #e2e2e2;">物流监控<small>今日物流数据</small></h1>
        </div>
    </div>
    <hr style="border-top: 1px solid #ccc;">
    <div class="row">
        <div class="col-sm-3 con-left" id="app">
            <div class="zb-box">
                <div class="zb-nr">
                    <div class="zb-title">
                        线路条数（条）
                    </div>
                    <div class="zb-num" style="color:#db444e;">
                        {{numData.path}}
                    </div>
                </div>
                <div class="zb-jj"></div>
                <div class="zb-image-b">
                    <img src="${contextPath}/static/image/daping/pageIcon/a1.png" class="zb-image"/>
                </div>
            </div>
            <div class="zb-box">
                <div class="zb-nr">
                    <div class="zb-title">
                        车辆数量（辆）
                    </div>
                    <div class="zb-num" style="color:#97d209;">
                        {{numData.car}}
                    </div>
                </div>
                <div class="zb-jj"></div>
                <div class="zb-image-b">
                    <img src="${contextPath}/static/image/daping/pageIcon/a2.png" class="zb-image"/>
                </div>
            </div>
            <div class="zb-box">
                <div class="zb-nr">
                    <div class="zb-title">
                        配送户数（户）
                    </div>
                    <div class="zb-num" style="color:#26f3e6;">
                        {{numData.customer}}
                    </div>
                </div>
                <div class="zb-jj"></div>
                <div class="zb-image-b">
                    <img src="${contextPath}/static/image/daping/pageIcon/a3.png" class="zb-image"/>
                </div>
            </div>
            <div class="zb-box">
                <div class="zb-nr">
                    <div class="zb-title">
                        配送条数（条）
                    </div>
                    <div class="zb-num" style="color:#db444e;">
                        {{numData.quantity}}
                    </div>
                </div>
                <div class="zb-jj"></div>
                <div class="zb-image-b">
                    <img src="${contextPath}/static/image/daping/pageIcon/a4.png" class="zb-image"/>
                </div>
            </div>
            <div class="zb-box">
                <div class="zb-nr">
                    <div class="zb-title">
                        配送金额
                    </div>
                    <div class="zb-num" style="color:#a6a737;">
                        {{managerAmt()}}
                    </div>
                </div>
                <div class="zb-jj"></div>
                <div class="zb-image-b">
                    <img src="${contextPath}/static/image/daping/pageIcon/a5.png" class="zb-image"/>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-center">
            <div class="zc-map" id="zc-map"></div>
        </div>
        <div class="col-sm-3">
            <div class="right-zb-box">
                <div class="zc-zb-box">
                    <div class="zc-zb-name">送达户数：</div>
                    <div class="zc-zb-num masked" id="fc">0</div>
                </div>
                <div class="zc-zb-pc" id="fcr">0%</div>

                <div class="zc-zb-box">
                    <div class="zc-zb-name">送达条数：</div>
                    <div class="zc-zb-num masked" id="fq">0</div>
                </div>
                <div class="zc-zb-pc" id="fqr">0%</div>
            </div>

            <div class="row" id="statistics-box">
                <div class="col-sm-12" id="main"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ec3688cc2547017ad39dd55153d18b85"></script>
<script>

    // 高度设置
    $('#zc-map').height($('#zc-map').width()*1);

    {
        var total = $(document).height();
        $('#main').height(total*0.36);
        $('.right-zb-box').height(total*0.4);
    }


    //初始化地图
    var map = new AMap.Map('zc-map',{
        resizeEnable: true,
        zoom: 12,
        mapStyle: 'amap://styles/grey',
        center: [116.39,39.9]//new AMap.LngLat(116.39,39.9)
    });
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'], function() {
        toolBar = new AMap.ToolBar();  //工具条
        scale = new AMap.Scale();    //比例尺
        map.addControl(toolBar);
        map.addControl(scale);
    });
    var infoWindow = new AMap.InfoWindow();

    //初始化统计图
    var myChart =  echarts.init($("#main")[0]);

    //vue实例
    new Vue({
        el: '#app',
        data: {
            markerList : [],
            numData:{
                path: 0,
                car : 0,
                customer: 0,
                quantity: 0,
                amt: 0,
                finishCustomer:0,
                finishQuantity: 0,
                CFR : '0.00%',
                QFR : '0.00%'
            }
        },
        mounted: function () {
            this.getData();
        },
        methods: {
            getData: function () {

                var vm = this;
                $.ajax({
                    url: '${contextPath}/shop/getLogisticsData',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: {

                        }
                    },
                    success: function (data) {
                        if (data.success) {
                            var nums = data.data.todayNums;
                            var carLocation = data.data.carLastLocation;
                            var yearData = data.data.yearData;

                            vm.updateNumData(nums);
                           // carLocation = [{CUST_CODE:'3232323',CUST_NAME:'dada',SHOP_ID:123,SHOP_NAME:'ddd',IS_EXP:'1',ADDRESS:'贵州省贵阳市白云区烟山红工大路',LONGITUDE:'106.68843',LATITUDE:'26.54832'}]
                            vm.updateMap(carLocation);
                            vm.updateMain1Data(yearData);
                            


                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.msg("网络错误")
                    }
                })
            },
            updateNumData : function (nums) {

                /*nums={PATH:23,CAR:23,CUSTOMER:2676,QUANTITY:75647,AMT:1039485.8,FCUSTOMER:1789,FQUANTITY:38474};*/

                this.numData.path = nums.PATH ? nums.PATH : '0';
                this.numData.car = nums.CAR ? nums.CAR : '0';
                this.numData.customer = nums.CUSTOMER ? nums.CUSTOMER : '0';
                this.numData.quantity = nums.QUANTITY ? nums.QUANTITY : '0';
                this.numData.amt = nums.AMT ? nums.AMT : '0';
                this.numData.finishCustomer = nums.FCUSTOMER ? nums.FCUSTOMER : '0';
                this.numData.finishQuantity = nums.FQUANTITY ? nums.FQUANTITY : '0';
                if (this.numData.customer != '0') {
                    this.numData.CFR = (this.numData.finishCustomer/this.numData.customer * 100).toFixed(2) + '%'
                }else {
                    this.numData.CFR = '0.00%'
                }
                if (this.numData.quantity != '0') {
                    this.numData.QFR = (this.numData.finishQuantity/this.numData.quantity * 100).toFixed(2) + '%'
                }else {
                    this.numData.QFR = '0.00%'
                }

                $('#fc').html(this.numData.finishCustomer);
                $('#fcr').html(this.numData.CFR);
                $('#fq').html(this.numData.finishQuantity);
                $('#fqr').html(this.numData.QFR);

            },
            updateMap : function (dataArray) {

                /*dataArray = [
                    {"LICENSE_ID":13,"STATE":"1","PATH_ID":"LPS1403","RN":1,"OPERATOR_TIME":1524647337000,"LATITUDE":26.19873,"PLATE_NUMBER":"贵BF5019","COURIER_ID":19320,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2706,"DRIVER_ID":19896,"LONGITUDE":105.48148,"DELIVER_LINE_NAME":"城网6线"},
                    {"LICENSE_ID":9,"STATE":"1","PATH_ID":"LPS2215","RN":1,"OPERATOR_TIME":1524647600000,"LATITUDE":26.5869,"PLATE_NUMBER":"贵B56871","COURIER_ID":19381,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2712,"DRIVER_ID":19835,"LONGITUDE":104.83027,"DELIVER_LINE_NAME":"明湖二段窑上"},
                    {"LICENSE_ID":16,"STATE":"1","PATH_ID":"LPS72604","RN":1,"OPERATOR_TIME":1524647189000,"LATITUDE":26.57486,"PLATE_NUMBER":"贵BHV327","COURIER_ID":19423,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2704,"DRIVER_ID":19424,"LONGITUDE":104.88353,"DELIVER_LINE_NAME":"荷城花园"},
                    {"LICENSE_ID":8,"STATE":"1","PATH_ID":"LPS2407","RN":1,"OPERATOR_TIME":1524647521000,"LATITUDE":26.6118,"PLATE_NUMBER":"贵BN3418","COURIER_ID":19431,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2710,"DRIVER_ID":19846,"LONGITUDE":104.8005,"DELIVER_LINE_NAME":"德坞梅花山"},
                    {"LICENSE_ID":7,"STATE":"1","PATH_ID":"LPS2206","RN":1,"OPERATOR_TIME":1524647130000,"LATITUDE":26.3747,"PLATE_NUMBER":"贵BN3400","COURIER_ID":19453,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2702,"DRIVER_ID":19385,"LONGITUDE":105.20546,"DELIVER_LINE_NAME":"红岩"},
                    {"LICENSE_ID":1,"STATE":"1","PATH_ID":"LPS2309","RN":1,"OPERATOR_TIME":1524647433000,"LATITUDE":26.70096,"PLATE_NUMBER":"贵BD4985","COURIER_ID":19456,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2708,"DRIVER_ID":19855,"LONGITUDE":104.80532,"DELIVER_LINE_NAME":"红旗矿西山"},
                    {"LICENSE_ID":40,"STATE":"1","PATH_ID":"LPS1405","RN":1,"OPERATOR_TIME":1524647564000,"LATITUDE":26.6433,"PLATE_NUMBER":"贵BNB675","COURIER_ID":19473,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2711,"DRIVER_ID":20723,"LONGITUDE":104.83171,"DELIVER_LINE_NAME":"郎岱2"},
                    {"LICENSE_ID":41,"STATE":"1","PATH_ID":"LPS2304","RN":1,"OPERATOR_TIME":1524647397000,"LATITUDE":26.72495,"PLATE_NUMBER":"贵BNW192","COURIER_ID":19482,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2707,"DRIVER_ID":19397,"LONGITUDE":104.9901,"DELIVER_LINE_NAME":"南开金盆"},
                    {"LICENSE_ID":18,"STATE":"1","PATH_ID":"LPS121507","RN":1,"OPERATOR_TIME":1524647162000,"LATITUDE":26.22055,"PLATE_NUMBER":"贵BHV372","COURIER_ID":19496,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2703,"DRIVER_ID":19852,"LONGITUDE":105.46747,"DELIVER_LINE_NAME":"城网3线"},
                    {"LICENSE_ID":17,"STATE":"1","PATH_ID":"LPS1406","RN":1,"OPERATOR_TIME":1524647300000,"LATITUDE":26.58505,"PLATE_NUMBER":"贵BHV367","COURIER_ID":19505,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2705,"DRIVER_ID":19815,"LONGITUDE":104.83652,"DELIVER_LINE_NAME":"郎岱1"},
                    {"LICENSE_ID":10,"STATE":"1","PATH_ID":"LPS1407","RN":1,"OPERATOR_TIME":1524647492000,"LATITUDE":26.15646,"PLATE_NUMBER":"贵B56893","COURIER_ID":19709,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2709,"DRIVER_ID":19861,"LONGITUDE":105.19021,"DELIVER_LINE_NAME":"中寨"},
                    {"LICENSE_ID":6,"STATE":"1","PATH_ID":"LPS1402","RN":1,"OPERATOR_TIME":1524647651000,"LATITUDE":26.54454,"PLATE_NUMBER":"贵BD5396","COURIER_ID":19849,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2714,"DRIVER_ID":20722,"LONGITUDE":104.88581,"DELIVER_LINE_NAME":"新窑"},
                    {"LICENSE_ID":15,"STATE":"1","PATH_ID":"LPS1404","RN":1,"OPERATOR_TIME":1524647089000,"LATITUDE":26.23121,"PLATE_NUMBER":"贵BHV317","COURIER_ID":19853,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2701,"DRIVER_ID":19850,"LONGITUDE":105.37053,"DELIVER_LINE_NAME":"凉水井"},
                    {"LICENSE_ID":19,"STATE":"1","PATH_ID":"LPS101505","RN":1,"OPERATOR_TIME":1524647626000,"LATITUDE":26.19482,"PLATE_NUMBER":"贵BJD836","COURIER_ID":19856,"CHANNEL":"本部","DELIVERY_TIME":"2018-04-26","ID":2713,"DRIVER_ID":20155,"LONGITUDE":105.48243,"DELIVER_LINE_NAME":"城网1线"},
                    {"LICENSE_ID":42,"STATE":"1","PATH_ID":"LPS209","RN":1,"OPERATOR_TIME":1524703122000,"LATITUDE":25.78977,"PLATE_NUMBER":"贵BRM953","COURIER_ID":20272,"CHANNEL":"盘县","DELIVERY_TIME":"2018-04-26","ID":2718,"DRIVER_ID":20340,"LONGITUDE":104.66178,"DELIVER_LINE_NAME":"盘县三十一线"},
                    {"LICENSE_ID":21,"ASSIST_COURIER_ID":20330,"STATE":"1","PATH_ID":"LPS208","RN":1,"OPERATOR_TIME":1524703228000,"LATITUDE":25.79442,"PLATE_NUMBER":"贵BHS593","COURIER_ID":20274,"CHANNEL":"盘县","DELIVERY_TIME":"2018-04-26","ID":2721,"DRIVER_ID":20273,"LONGITUDE":104.54162,"DELIVER_LINE_NAME":"盘县三十线"},
                    {"LICENSE_ID":45,"ASSIST_COURIER_ID":20278,"STATE":"1","PATH_ID":"LPS203","RN":1,"OPERATOR_TIME":1524702993000,"LATITUDE":25.90518,"PLATE_NUMBER":"贵BLO938","COURIER_ID":20279,"CHANNEL":"盘县","DELIVERY_TIME":"2018-04-26","ID":2715,"DRIVER_ID":20336,"LONGITUDE":104.89404,"DELIVER_LINE_NAME":"盘县二十五线"},
                    {"LICENSE_ID":30,"ASSIST_COURIER_ID":20324,"STATE":"1","PATH_ID":"LPS210","RN":1,"OPERATOR_TIME":1524703251000,"LATITUDE":25.79266,"PLATE_NUMBER":"贵B56890","COURIER_ID":20283,"CHANNEL":"盘县","DELIVERY_TIME":"2018-04-26","ID":2722,"DRIVER_ID":20281,"LONGITUDE":104.85899,"DELIVER_LINE_NAME":"盘县三十二线"},
                    {"LICENSE_ID":31,"ASSIST_COURIER_ID":20285,"STATE":"1","PATH_ID":"LPS214","RN":1,"OPERATOR_TIME":1524703276000,"LATITUDE":25.785,"PLATE_NUMBER":"贵B56823","COURIER_ID":20284,"CHANNEL":"盘县","DELIVERY_TIME":"2018-04-26","ID":2723,"DRIVER_ID":20275,"LONGITUDE":104.6597,"DELIVER_LINE_NAME":"盘县三十六线"},
                    {"LICENSE_ID":44,"ASSIST_COURIER_ID":20341,"STATE":"1","PATH_ID":"LPS205","RN":1,"OPERATOR_TIME":1524703091000,"LATITUDE":25.67371,"PLATE_NUMBER":"贵BPW569","COURIER_ID":20286,"CHANNEL":"盘县","DELIVERY_TIME":"2018-04-26","ID":2717,"DRIVER_ID":20339,"LONGITUDE":104.60708,"DELIVER_LINE_NAME":"盘县二十七线"},
                    {"LICENSE_ID":24,"ASSIST_COURIER_ID":20276,"STATE":"1","PATH_ID":"LPS204","RN":1,"OPERATOR_TIME":1524703039000,"LATITUDE":25.7322,"PLATE_NUMBER":"贵BHS572","COURIER_ID":20326,"CHANNEL":"盘县","DELIVERY_TIME":"2018-04-26","ID":2716,"DRIVER_ID":20337,"LONGITUDE":104.64102,"DELIVER_LINE_NAME":"盘县二十六线"},
                    {"LICENSE_ID":20,"ASSIST_COURIER_ID":22537,"STATE":"1","PATH_ID":"LPS206","RN":1,"OPERATOR_TIME":1524703161000,"LATITUDE":25.8118,"PLATE_NUMBER":"贵BHS562","COURIER_ID":20327,"CHANNEL":"盘县","DELIVERY_TIME":"2018-04-26","ID":2719,"DRIVER_ID":20335,"LONGITUDE":104.68507,"DELIVER_LINE_NAME":"盘县二十八线"},
                    {"LICENSE_ID":23,"ASSIST_COURIER_ID":20338,"STATE":"1","PATH_ID":"LPS207","RN":1,"OPERATOR_TIME":1524703205000,"LATITUDE":25.7846,"PLATE_NUMBER":"贵BHS549","COURIER_ID":20333,"CHANNEL":"盘县","DELIVERY_TIME":"2018-04-26","ID":2720,"DRIVER_ID":20271,"LONGITUDE":104.61001,"DELIVER_LINE_NAME":"盘县二十九线"}];
*/
                map.remove(this.markerList);
                map.clearInfoWindow();
                this.markerList = [];

                if (!dataArray || dataArray.length ==0) {
                    return;
                }

                map.setCenter(new AMap.LngLat(dataArray[0].LONGITUDE,dataArray[0].LATITUDE));
                var markerList=[];
                for (var index in dataArray) {
                    var markeInfo = dataArray[index];

                    var icon = new AMap.Icon({
                        image : '${contextPath}/static/image/car.png',//24px*24px
                        //icon可缺省，缺省时为默认的蓝色水滴图标，
                        size : new AMap.Size(50,38)
                    });


                    var marker = new AMap.Marker({
                        icon : icon,//24px*24px
                        position : [markeInfo.LONGITUDE,markeInfo.LATITUDE],
                        title:markeInfo.PLATE_NUMBER,
                        offset : new AMap.Pixel(-12,-12),
                        //animation:'AMAP_ANIMATION_BOUNCE',
                        map : map
                    });



                    marker.content = '区域：'+ (markeInfo.CHANNEL ? markeInfo.CHANNEL : '')  +
                        '<br>路线：'+ markeInfo.DELIVER_LINE_NAME +
                        '<br>车辆：'+ markeInfo.PLATE_NUMBER;

                    AMap.event.addListener(marker, 'click', function(e) {
                        infoWindow.setContent(e.target.content);
                        infoWindow.open(map, e.target.getPosition());


                    });


                    markerList.push(marker);

                }

                this.markerList = markerList;

            },
            updateMain1Data: function (main1Data) {
                //if (!main1Data) return;

                /*main1Data = [
                    {"CUSTOMER":12755,"AMT":62449977.03,"DELIVER_DATE":"201701","QUANTITY":276767},
                    {"CUSTOMER":12755,"AMT":44449977.03,"DELIVER_DATE":"201702","QUANTITY":554554},
                    {"CUSTOMER":12755,"AMT":54449977.03,"DELIVER_DATE":"201703","QUANTITY":343433},
                    {"CUSTOMER":12755,"AMT":74449977.03,"DELIVER_DATE":"201704","QUANTITY":545435},
                    {"CUSTOMER":12755,"AMT":84449977.03,"DELIVER_DATE":"201705","QUANTITY":343435},
                    {"CUSTOMER":12755,"AMT":34449977.03,"DELIVER_DATE":"201706","QUANTITY":235435},
                    {"CUSTOMER":12755,"AMT":44449977.03,"DELIVER_DATE":"201707","QUANTITY":635435},
                    {"CUSTOMER":12755,"AMT":94449977.03,"DELIVER_DATE":"201708","QUANTITY":835435},
                    {"CUSTOMER":12755,"AMT":74449977.03,"DELIVER_DATE":"201709","QUANTITY":735435},
                    {"CUSTOMER":12755,"AMT":44449977.03,"DELIVER_DATE":"201710","QUANTITY":835435},
                    {"CUSTOMER":55300,"AMT":74569490.12,"DELIVER_DATE":"201711","QUANTITY":515226},
                    {"CUSTOMER":28758,"AMT":62632876.48,"DELIVER_DATE":"201712","QUANTITY":691905},
                    {"CUSTOMER":74280,"AMT":11129851.67,"DELIVER_DATE":"201801","QUANTITY":660673},
                    {"CUSTOMER":48514,"AMT":15510761.07,"DELIVER_DATE":"201802","QUANTITY":761119},
                    {"CUSTOMER":55294,"AMT":37432697.54,"DELIVER_DATE":"201803","QUANTITY":710662},
                    {"CUSTOMER":45158,"AMT":320401088.4,"DELIVER_DATE":"201804","QUANTITY":811275}];
*/
                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var months = ['1','2','3','4','5','6','7','8','9','10','11','12'];
                var quantity17 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                var quantity18 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                for (var index in main1Data) {
                    var data = main1Data[index];
                    var year = data.DELIVER_DATE.substring(0, 4);
                    var month = data.DELIVER_DATE.substring(4);
                    var idx;
                    switch (month) {
                        case '01':
                            idx = 0;
                            break;
                        case '02':
                            idx = 1;
                            break;
                        case '03':
                            idx = 2;
                            break;
                        case '04':
                            idx = 3;
                            break;
                        case '05':
                            idx = 4;
                            break;
                        case '06':
                            idx = 5;
                            break;
                        case '07':
                            idx = 6;
                            break;
                        case '08':
                            idx = 7;
                            break;
                        case '09':
                            idx = 8;
                            break;
                        case '10':
                            idx = 9;
                            break;
                        case '11':
                            idx = 10;
                            break;
                        case '12':
                            idx = 11;
                            break;
                        default:
                            ;
                    }
                    if (year == '2017') {
                        quantity17[idx] = (data.QUANTITY/250).toFixed(2);
                    } else if (year == '2018') {
                        quantity18[idx] = (data.QUANTITY/250).toFixed(2);
                    }

                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#6245f7', '#35b1d2'],
                    title: {
                        text: '配送统计',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['2017','2018']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 14
                        },
                        data: months
                    },
                    yAxis: {
                        name: "（箱）",
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'2017',
                            type:'line',
                            data:quantity17
                        },
                        {
                            name:'2018',
                            type:'line',
                            data:quantity18
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            },
            managerAmt: function () {
                var payAmt = this.numData.amt;
                if (!payAmt) {
                    return '0元';
                }
                if (payAmt > 100000000) {
                    return (payAmt / 100000000).toFixed(2) + "亿";
                }
                if (payAmt > 10000) {
                    return (payAmt / 10000).toFixed(2) + "万";
                }
                return payAmt
            }
        }
    });
</script>
</body>
</html>